<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="最爱古风小雷丘">
    <title></title>
    <style>
       .box{
           width: 220px;
           margin: 100px auto;
           text-align: center;
       }
       a{
           text-decoration: none;
           color: inherit;
           font-size: inherit;
       }
       
     span{
          display: inline-block; 
         text-align: center;
         width: 100px;
         height: 30px;
         line-height: 30px;
         background-color: gray;
         position: relative;

     }
       ul{
           width: 100px;
           margin: 0;
           padding: 0;
           list-style: none;
           position: absolute;
           right:0;
           top: 30px; 
           border: 1px solid lightgray;
            display: none;  
       }
    li{
        height: 30px;
        border-bottom: 1px dotted lightgray;
    }
    .box span:nth-child(1){
        background-color: lightblue;
    }
    </style>
</head>
<body>
    
    <div class="box">
        <span>
            <a href="#">选择项目:</a>
        </span><span id="select">
            <a href="#">未选择</a>
            <ul>
                <li><a href="#">html5</a></li>
                <li><a href="#">css3</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">JQuery</a></li>
            </ul>
        </span>
    </div>


    <script src="jquery-3.2.1.js"></script>
</body>
</html>
<script>
//    $('#select').html(123);
    $('#select').on('click',function(){
        console.log(123)
         $('ul').show();

         $('li').hover(function(){
             $(this).css('background','lightgray').siblings().css('background','white');
         },function(){
             $(this).css('background','white');
         }) 

       $('li').click(function(ev){
             ev.stopPropagation();
             $('#select').children('a').html($(this).html());
             $('ul').hide();
             console.dir(ev);
        })
    });
         
</script>